<script setup lang="ts">
import {computed} from 'vue'
import {IconConfig, ColorWhite, ColorRed, ColorTheme} from '@/api/config'
import useCLodop from '@/store/cLodop'

import dIcon from '@/components/dIcon.vue'
import printSelete from './printSelete.vue'

const cLodopStore = useCLodop.setup().store

//条码和报告打印机是否都设置好
const printStatus = computed(() => {
  return cLodopStore.getPrintStatus
})

//描述
// const printStatusText = computed(() => {
//   return printStatus.value ? '已选择' : '未选择'
// })

//显示选择打印机
// const showPrint = computed(() => {
//   return cLodopStore.getShowPrinter
// })

//图标
const printIcon: IconConfig = {
  icon: 'common-clodop-print',
  type: 'custom',
  size: 18,
  color: ColorWhite
}
const warnIcon: IconConfig = {
  icon: 'WarningFilled',
  type: 'el',
  size: 16,
  color: ColorRed
}
const checkIcon: IconConfig = {
  icon: 'CircleCheckFilled',
  type: 'el',
  size: 16,
  color: ColorTheme
}

const onShowPrint = () => {
  cLodopStore.setShowPrinter(true)
}

const onClose = () => {
  cLodopStore.setShowPrinter(false)
}
</script>

<template>
  <div
    class="home-print-status__wapper d-common-flex-row d-common-flex-algin-center"
    @click="onShowPrint"
  >
    <!-- <d-icon :icon-config="printIcon" />
    <d-icon
      v-if="printStatus"
      class="home-print-status-fill"
      :icon-config="checkIcon"
    /> -->
    <!-- <d-icon v-else class="home-print-status-fill" :icon-config="warnIcon" /> -->
    <!-- <span class="d-common-text-main home-print-status-text">{{
      printStatusText
    }}</span> -->
  </div>
  <!-- <print-selete v-if="showPrint" :show-dialog="showPrint" @close="onClose" /> -->
</template>

<style scoped>
.home-print-status__wapper {
  margin-right: 14px;
}
.home-print-status-text {
  margin-left: 11px;
  color: var(--d-color-white);
}
.home-print-status-fill {
  margin-left: -3px;
}
</style>
